<template>
  <div v-loading="loading" class="app-content" style="min-height: 500px">
    <h2 style="font-weight: 500; margin-bottom: 40px">系统设置</h2>

    <!-- 有配置数据时显示表单 -->
    <dk-form v-if="!hasNoApp && formData" ref="editForm" :form-data="formData" />

    <!-- 无小程序配置时显示空状态 -->
    <div v-if="hasNoApp" class="empty-state">
      <div class="empty-icon">
        <i class="el-icon-warning-outline"></i>
      </div>
      <div class="empty-title">{{ err.msg }}</div>
      <div class="empty-description">请先配置小程序应用后再进行系统设置</div>
    </div>
  </div>
</template>

<script setup>
import { ref, inject, onMounted } from 'vue'
import { getPlatformAddonAppForm } from '@/api/platform/platform_app'

const editForm = ref(null)
const formData = ref(null)
const loading = ref(true)
const defaultApp = inject('defaultApp')
const hasNoApp = ref(false)
const err = ref({})

const getAppEditForm = () => {
  loading.value = true
  hasNoApp.value = false
  getPlatformAddonAppForm(defaultApp.value.id, getPlaid())
    .then((res) => {
      if (res.code === -1 && res.msg === '当前平台无小程序') {
        // 当前平台无小程序，显示空页面
        formData.value = null
        hasNoApp.value = true
      } else {
        formData.value = res.data
        hasNoApp.value = false
      }
      loading.value = false
    })
    .catch((error) => {
      err.value = error
      formData.value = null
      hasNoApp.value = true
      loading.value = false
    })
}

onMounted(() => {
  console.log('defaultApp', defaultApp)
  getAppEditForm()
})
</script>

<style scoped>
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.empty-icon {
  font-size: 64px;
  color: #e6a23c;
  margin-bottom: 20px;
}

.empty-title {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 10px;
}

.empty-description {
  font-size: 14px;
  color: #909399;
  line-height: 1.5;
}
</style>
